<template>
  <div class="friend_detail">
    <div class="friend_name">{{$store.state.user.id!=friendDetailData.userId?friendDetailData.friendRemarks:friendDetailData.userName}}</div>
    <div class="detail_box">
      <div class="friend_opt">
        <img class="friend_avatar" :src="friendDetailData.friendHeadImg" />
        <div class="friend_name" v-show="!remarkFriend">
          <div class="name_text">{{$store.state.user.id!=friendDetailData.userId?friendDetailData.friendRemarks:friendDetailData.userName}}</div>
          <img class="editor_icon" src="../../assets/icons/icon_modify_up.png" v-if="$store.state.user.id!=friendDetailData.userId" @click.stop="remarkName"/>
        </div>
        <div class="friend_editor" v-show="remarkFriend">
          <input class="remark_input" type="text" maxlength="30" v-model="nameRemarks" @click.stop/>
          <div class="edit_confirm" @click.stop="comfirmRemark"></div>
        </div>
        <div class="delete_friend" @click="openDeleteFriendDialog">
          <img class="delete_icon" src="../../assets/icons/icon_trash_up.png"/>
          <span class="delete_text">删除好友</span>
        </div>
      </div>

      <div class="friend_info">
        <div class="info_line">
          <div class="info_title">昵称</div>
          <div class="info_value">{{$store.state.user.id!=friendDetailData.userId?friendDetailData.friendRemarks:friendDetailData.userName}}</div>
        </div>
        <div class="info_line">
          <div class="info_title">签名</div>
          <div class="info_value">{{friendDetailData.remarks}}</div>
        </div>
        <!-- <div class="info_line">
          <div class="info_title">地区</div>
          <div class="info_value">广东省 广州市</div>
        </div> -->
      </div>

      <div class="btns">
        <!-- <div class="primarybtn default" @click="sendCard">发送名片</div> -->
        <div class="primarybtn" @click="transMessage">发消息</div>
      </div>

      <el-dialog
        :visible.sync="deleteFriendDialog"
        width="290px"
        :show-close="false"
        :close-on-click-modal="false">

        <div class="dialog_tips">
          <div>确认删除当前好友?</div>
          <div class="little_tips">同时删除与该好友的所有聊天记录?</div>
        </div>
        <div class="btns_box">
          <div class="primarybtn default" @click="cancelDeleteFriendDialog">取消</div>
          <div class="primarybtn" @click="deleteFriend">确定</div>
        </div>
      </el-dialog>
      
      <shareCard :shareCardState="shareCardState" v-show="shareCardState" @changeShareCardState="changeShareCardState" />
    </div>
  </div>
</template>

<script>
import {Dialog,Message} from 'element-ui'
import shareCard from '../share_card'
import bus from '../../bus'
import {upFriendRemark,delFriend,chatList} from '../../api/api'
export default {
  name:'friend_detail',
  data(){
      return {
        shareCardState:false,
        remarkFriend:false,
        deleteFriendDialog:false,
        friendDetailData:'',
        nameRemarks:''
      }
  },
  components: {
    shareCard,
    'el-dialog':Dialog,
  },
  mounted(){
    bus.$on('close',msg => {
      this.remarkFriend = msg
    })
    bus.$on('getFriendDetail',msg => {
      console.log('busF',msg)
      this.friendDetailData = msg
      this.nameRemarks = msg.friendRemarks
    })
  },
  methods:{
    //点击发送消息按钮
    transMessage(){
      let params = {
          sendUserId:this.$store.state.user.id,
          toId:this.friendDetailData.friendId,
          globalId:0,
          pageSize:100
      }
      chatList(params)
      .then(res => {
        if(res.data&&res.data.data.list&&res.data.data.list.length!=0){
          var newChat = res.data.data.list[0]
          if(newChat.sendUserId!=this.$store.state.user.id){
            var toId = newChat.toId
            var toUserImg = newChat.toUserImg
            var toUserName = newChat.toUserName
            
            newChat.toId = this.friendDetailData.friendId
            newChat.toUserImg = this.friendDetailData.friendHeadImg
            newChat.toUserName = this.friendDetailData.friendRemarks

            newChat.sendUserId = toId
            newChat.sendUserImg = toUserImg
            newChat.sendUserName = toUserName
          }else{
            newChat.toId = this.friendDetailData.friendId
            newChat.toUserImg = this.friendDetailData.friendHeadImg
            newChat.toUserName = this.friendDetailData.friendRemarks
          }
        }else{
          var newChat = {
            content: "",
            contentImg: "",
            contentVideo: "",
            globalId: "",
            id: 0,
            index: 0,
            messageId: 1,
            messageType: 1,
            mine: 0,
            readStatus: 0,
            sendTime: "",
            sendUserId: this.$store.state.user.id,
            sendUserImg: this.$store.state.user.headImg,
            sendUserName: this.$store.state.user.userName,
            serviceTime: "",
            toId: this.friendDetailData.friendId,
            toUserImg: this.friendDetailData.friendHeadImg,
            toUserName: this.friendDetailData.friendRemarks
          }
        }
        newChat.type = 1
        this.$store.commit('setChatList',newChat)
        this.$store.commit('chooseTalk',0)
        this.$store.commit('setNav','talk')
      })
    },
    //点击发送名片
    sendCard(){
      this.shareCardState = true
    },
    //触发发送名片弹窗
    changeShareCardState(value){
      this.shareCardState = value
    },
    //打开删除好友确认弹窗
    openDeleteFriendDialog(){
      this.deleteFriendDialog = true
    },
    //关闭删除好友确认弹窗
    cancelDeleteFriendDialog(){
      this.deleteFriendDialog = false
    },
    remarkName(){
      this.remarkFriend = true
    },
    //确认修改备注
    comfirmRemark(){
      let params = {
          userId:this.$store.state.user.id,
          friendId:this.friendDetailData.friendId,
          friendRemarks:this.nameRemarks
      }
      upFriendRemark(params)
      .then(res => {
          this.$store.commit('changeFriendRemark',{
            friendId:this.friendDetailData.friendId,
            friendRemarks:this.nameRemarks
          })
          this.friendDetailData.friendRemarks = this.nameRemarks
          this.remarkFriend = false
          Message({
            message: '备注成功',
            type: 'success'
          })
      })
    },
    //删除好友
    deleteFriend(){
      let params = {
          userId:this.$store.state.user.id,
          friendId:this.friendDetailData.friendId
      }
      delFriend(params)
      .then(res => {
          this.$store.commit('deleteFriend',this.friendDetailData.friendId)
          this.cancelDeleteFriendDialog()
          Message({
            message: '删除成功',
            type: 'success'
          })
      })
    }
  }
}
</script>

<style scoped>
.friend_detail{
  width:100%;
}
.friend_name{
  height: 56px;
  background: #fcfcfc;
  font-size: 16px;
  line-height: 56px;
  padding: 0 20px;
}
.detail_box{
  padding: 0 6.25vw;
}
.friend_opt{
  display: flex;
  align-items: center;
  padding: 30px 10px 40px 10px;
  border-bottom: 1px solid #dcdcdc;
}
.friend_avatar{
  width:60px;
  height:60px;
}
.friend_name,.delete_friend{
  display: flex;
  align-items: center;
}
.name_text{
  color: #333;
  font-size: 16px;
}
.editor_icon{
  width:20px;
  cursor: pointer;
}
.delete_icon{
  width:20px;
  margin-right:4px;
}
.friend_editor{
  display: flex;
  align-items: center;
  margin-left:10px;
}
.remark_input{
  line-height: 24px;
  border: 1px solid #e7e7e7;
  background: #fff;
  border-right: 0;
  width: 136px;
  padding-left: 4px;
}
.edit_confirm{
  width: 24px;
  height: 26px;
  background: #428dfc url('../../assets/confirm.png') no-repeat 50%;
  cursor: pointer;
}
.delete_friend{
  margin-left:auto;
  cursor: pointer;
}
.delete_text{
  color:#999;
  font-size: 14px;
}
.friend_info{
  padding: 20px 10px;
}
.info_line{
  line-height: 40px;
  display: flex;
  align-items: center;
}
.info_title{
  color: #999;
  font-size: 14px;
  margin-right:20px;
}
.info_value{
  color: #333;
  font-size: 14px;
}
.btns{
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #dcdcdc;
  padding-top:5vh;
}
.btns .primarybtn{
  width:132px;
  height: 40px;
  line-height: 40px;
}


.dialog_tips{
  line-height: 20px;
  padding: 46px 0 37px;
  text-align: center;
}
.little_tips{
  font-size: 12px;
}
.btns_box{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
.btns_box .primarybtn.default{
  margin-left: 0px;
}
.btns_box .primarybtn{
  margin-left:46px;
}
</style>